<template>
  <div class="detail-info">
    <header>
      <h2>{{ propValue?.name }}</h2>
    </header>
    <ul class="tag-list">
      <li v-for="item in propValue?.labelNames" :key="item" class="tag-item">{{ item }}</li>
    </ul>
    <ul class="info-list-wrap">
      <li>
        <div class="info-item">
          <div>状态</div>
          <div>
            <div class="status-tag" :class="statusClassFun(propValue?.status)">{{ propValue?.status }}</div>
          </div>
        </div>
        <div class="line"></div>
        <div class="info-item">
          <div>参与人数</div>
          <div>
            <span>{{ propValue?.participantNum }}</span>
          </div>
        </div>
      </li>
      <li>
        <div class="info-item">
          <div>活动时间</div>
          <div>
            <span>{{ propValue?.beginTime }} - {{ propValue?.endTime }}</span>
          </div>
        </div>
      </li>
      <li>
        <div class="info-item">
          {{ propValue?.description }}
        </div>
      </li>

      <img v-if="propValue?.isParticipated" class="join-img" src="@/assets/img/hit-contest/join.png" />
    </ul>
  </div>
</template>

<script setup lang="ts">
  export interface DataSetCardProps {
    propValue: any
  }
  withDefaults(defineProps<DataSetCardProps>(), {})

  const statusClassFun = (status: string) => {
    return [status === '进行中' && 'underway', status === '未开始' && 'not-start']
  }
</script>

<style lang="less" scoped>
  .detail-info {
    padding: 20px;
    width: 328px;
    background: #fff;
    border: 1px solid #e8e9eb;
    border-radius: 10px;
    flex-shrink: 0;

    > header {
      display: flex;
      align-items: center;
      // width: calc(100% - 34px);
      gap: 0 8px;

      > h2 {
        font-size: 16px;
        font-family: 'Noto Sans SC';
        color: rgba(21, 23, 27, 0.95);
        font-weight: 700;
        line-height: 24px;
        // .elliptical-1();
      }
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 6px;
      margin-top: 12px;

      .tag-item {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 6px;
        font-size: 12px;
        color: #8599bf;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 6px;
        font-weight: 400;
        line-height: 20px;
      }
    }

    .info-list-wrap {
      position: relative;
      display: flex;
      margin-top: 8px;
      flex-direction: column;
      gap: 12px 0;

      .info-item {
        > div {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: rgba(25, 25, 48, 0.45);
          gap: 0 16px;
          font-weight: 400;

          span {
            color: rgba(25, 25, 48, 0.75);
          }
        }

        .status-tag {
          padding: 0 6px;
          height: 28px;
          font-size: 14px;
          font-family: 'Noto Sans SC';
          color: rgba(17, 22, 31, 0.52);
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-radius: 6px;
          font-weight: 400;
          line-height: 28px;

          &.underway {
            color: #5cc969;
            background-color: rgba(92, 201, 105, 0.08);
            border-color: rgba(0, 0, 0, 0.05);
          }

          &.not-start {
            color: #f59700;
            background-color: rgba(245, 151, 0, 0.08);
            border-color: rgba(0, 0, 0, 0.05);
          }
        }
      }

      > li {
        &:nth-child(1),
        &:nth-child(2) {
          display: flex;
          align-items: center;

          > div {
            display: flex;
            font-size: 14px;
            gap: 0 16px;
          }
        }

        &:nth-child(1) {
          .line {
            margin: 0 16px;
            width: 1px;
            height: 12px;
            background: rgba(0, 0, 0, 0.05);
          }
        }

        &:nth-child(3) {
          font-size: 14px;
          color: rgba(17, 22, 31, 0.52);
          font-weight: 400;
          line-height: 22px;
        }
      }

      .join-img {
        position: absolute;
        top: -20px;
        right: -20px;
        width: 90px;
        height: 90px;
        // transform: rotate(-30deg);
      }
    }
  }
</style>
